<template>
	<div class="menu-left">
		<Menu mode="horizontal" @on-select='lowerStep' :active-name="modaleShow">
			<MenuItem :name="1">内部员工事故简报统计</MenuItem>
			<MenuItem :name="2">相关方人员事故简报统计</MenuItem>
		</Menu>
		<Form ref="form1" :model="dataToQuery" style="margin-top: 10px;" :label-width="90">
			<Row class="query-form">
				<!-- <Col span="8">
						<FormItem label="二级集团">
								<two-level-org class="query-form-el" v-model="dataToQuery.twoLevelOrgId" />
						</FormItem>
				</Col> -->
				<Col span="8">
				<FormItem label="单位名称：" prop="companyId">
					<cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName'
						:orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}">
					</cascader-dom>
				</FormItem>
				</Col>
				<Col span="5" v-if="!switchFlag">
				<!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
				<Button @click="reset1" class="ivu-btn-reset">重置</Button>
				<Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
				</Col>
			</Row>

		</Form>
		<Row style="margin-top: 10px;">
			<Col span="24">
			<Card dis-hover>
				<div class="info">
					<div class="info-div">
						<div class="info-div-width">
							<div class="info-div-left">
								<img class="info-div-left-img" src="../../../../assets/bbmg/shigu/sgsl.png" />
							</div>
							<div class="info-div-right">
								<span class="info-div-right-title">事故数量</span>
								<div class="info-div-right-bottom">
									<span class="info-div-right-num">{{titleMap.accSum}}</span>
									<span class="info-div-right-danwei">起</span>
								</div>
							</div>
						</div>
					</div>
					<div class="info-div">
						<div class="info-div-width">
							<div class="info-div-left">
								<img class="info-div-left-img" src="../../../../assets/bbmg/shigu/jjss.png" />
							</div>
							<div class="info-div-right">
								<span class="info-div-right-title">经济损失</span>
								<div class="info-div-right-bottom">
									<span style="font-size: 14px;width: 110px"
										class="info-div-right-num">{{titleMap.loseMoney}}</span>
									<!--<span class="info-div-right-danwei">万元</span>-->
								</div>
							</div>
						</div>
					</div>
					<div class="info-div">
						<div class="info-div-width">
							<div class="info-div-left">
								<img class="info-div-left-img" src="../../../../assets/bbmg/shigu/xgts.png" />
							</div>
							<div class="info-div-right">
								<span class="info-div-right-title">歇工天数</span>
								<div class="info-div-right-bottom">
									<span class="info-div-right-num">{{titleMap.daysWork}}</span>
									<span class="info-div-right-danwei">天</span>
								</div>
							</div>
						</div>
					</div>
					<div class="info-div">
						<div class="info-div-width">
							<div class="info-div-left">
								<img class="info-div-left-img" src="../../../../assets/bbmg/shigu/wssj.png" />
							</div>
							<div class="info-div-right">
								<span class="info-div-right-title">未遂事件</span>
								<div class="info-div-right-bottom">
									<span class="info-div-right-num">{{titleMap.missRecordNum}}</span>
									<span class="info-div-right-danwei">次</span>
								</div>
							</div>
						</div>
					</div>
					<div class="info-div">
						<div class="info-div-width">
							<div class="info-div-left">
								<img class="info-div-left-img" src="../../../../assets/bbmg/shigu/qs.png" />
							</div>
							<div class="info-div-right">
								<span class="info-div-right-title">轻伤</span>
								<div class="info-div-right-bottom">
									<span class="info-div-right-num">{{titleMap.qingAccNum}}</span>
									<span class="info-div-right-danwei">起</span>
									<span class="info-div-right-num">{{titleMap.qingNum}}</span>
									<span class="info-div-right-danwei">人</span>
								</div>
							</div>
						</div>
					</div>
					<div class="info-div">
						<div class="info-div-width">
							<div class="info-div-left">
								<img class="info-div-left-img" src="../../../../assets/bbmg/shigu/zs.png" />
							</div>
							<div class="info-div-right">
								<span class="info-div-right-title">重伤</span>
								<div class="info-div-right-bottom">
									<span class="info-div-right-num">{{titleMap.zhongAccNum}}</span>
									<span class="info-div-right-danwei">起</span>
									<span class="info-div-right-num">{{titleMap.zhongNum}}</span>
									<span class="info-div-right-danwei">人</span>
								</div>
							</div>
						</div>
					</div>
					<div class="info-div">
						<div class="info-div-width">
							<div class="info-div-left">
								<img class="info-div-left-img" src="../../../../assets/bbmg/shigu/sw.png" />
							</div>
							<div class="info-div-right">
								<span class="info-div-right-title">死亡</span>
								<div class="info-div-right-bottom">
									<span class="info-div-right-num">{{titleMap.deadAccNum}}</span>
									<span class="info-div-right-danwei">起</span>
									<span class="info-div-right-num">{{titleMap.deadNum}}</span>
									<span class="info-div-right-danwei">人</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</Card>
			</Col>
		</Row>
		<Row :gutter="24" v-if="loading">
			<Col :span="modaleShow==2?8:12" style=" margin-top: 10px;">
			<Card dis-hover>
				<p class="p-title">▎ </p>
				<p>伤害程度人数统计</p>
				<div ref="pieInjuryLevel" style="height: 300px;"></div>
			</Card>
			</Col>
			<Col :span="modaleShow==2?8:12" style=" margin-top: 10px;">
			<Card dis-hover>
				<p class="p-title">▎ </p>
				<p>事故类别数量统计</p>
				<div ref="pieAccType" style="height: 300px;"></div>
			</Card>
			</Col>
			<Col span="12" v-show='modaleShow==1' style=" margin-top: 10px;">
			<Card dis-hover>
				<p class="p-title">▎ </p>
				<p>工伤情况 伤残等级</p>
				<div ref="radargs" style="height: 300px;"></div>
			</Card>
			</Col>
			<Col :span="modaleShow==2?8:12" style=" margin-top: 10px;">
			<Card dis-hover>
				<p class="p-title">▎ </p>
				<p>历年事故伤害趋势统计</p>
				<div ref="levelInjury" style="height: 300px;"></div>
			</Card>
			</Col>
		</Row>
		<Row :gutter="24" style=" margin-top: 10px;">
			<Col span="24">
			<Card dis-hover>
				<p class="p-title">▎ </p>
				<!-- <p>事故类型数量统计</p> -->
				<p>历年事故人数统计</p>
				<div ref="twoLevelOrgOld" style="height: 300px;"></div>
			</Card>
			</Col>
		</Row>


	</div>
</template>
<script>
	import {
		Api
	} from '@/api/index.js'
	import pageCommonFunction from '@/components/pageCommonFunction.js'
	import {
		sessionStorage
	} from '../../../../common/cacheUtils.js';
	import echarts from 'echarts'

	var cascaderDom = () => import('@/components/cascader-dom.vue');
	export default {
		components: {
			cascaderDom
		},
		data() {
			return {
				...this.createCommonDataField(),
				// 切换标签
				currentPosition: "",
				currentType: "",
				// api
				loading: false,
				detailData: [],
				pageSizeArray: [10, 20, 50],
				pagedata: {
					total: 0,
					pageSize: 10,
					fromPage: 1,
				},
				model1: false,
				currentUser: JSON.parse(sessionStorage('userId').get('userId')),
				queryUrl: Api.getEchatBriefing + '/companyId/',
				twoLevelOrgOldList: [],
				titleMap: {},
				year: '',
				modaleShow: 1
			}
		},
		mounted() {
			this.year = new Date().getFullYear()
			this.lowerStep(this.modaleShow)
			// this.query();
		},
		methods: {
			...pageCommonFunction,
			setCompanyName(data) {
				this.$set(this.dataToQuery, 'companyName', data)
			},
			setCompanyId(data) {
				if (data && data instanceof Array && data.length > 0) {
					this.dataToQuery.companyId = data[data.length - 1];
				} else {
					this.dataToQuery.companyId = null;
				}
			},
			reset1() {
				this.dataToQuery = {};
				if (this.$refs.queryOrgCascader) {
					this.$refs.queryOrgCascader.resetCurrentOrg();
				}
				this.pagedata.currentPage = 1
				this.lowerStep(this.modaleShow)
			},
			lowerStep(name) {
				this.modaleShow = name
				this.loading = false
				setTimeout(() => {
					this.loading = true
					this.query();
				 }, 200);

			},
			query() {
				
				let companyId = this.currentUser.companyId
				if (this.dataToQuery.companyId) {
					companyId = this.dataToQuery.companyId
				}
				// type 1内部员工 ，2相关方人员统计
				this.$http.get(this.queryUrl + companyId + '?type=' + this.modaleShow).then((res) => {
					if (res.data.status === 201) {
						this.$Message.error(res.data.msg);
					}
					
					
					let pieInjuryLevelChart = echarts.init(this.$refs.pieInjuryLevel);
					// pieInjuryLevelChart.showLoading({
					// 	 text: 'loading',
					// 	      color: '#c23531',
					// 	      textColor: '#000',
					// 	      maskColor: 'rgba(255, 255, 255, 0.2)',
					// 	      zlevel: 0,
					// })
					let pieAccTypeChart = echarts.init(this.$refs.pieAccType);
					let radargsChart = echarts.init(this.$refs.radargs);
					let barLevelInjuryChart = echarts.init(this.$refs.levelInjury);
					let barTwoLevelOrgOldChart = echarts.init(this.$refs.twoLevelOrgOld);
					
					let map = res.data.data;
					this.titleMap = map.titleMap

					let pieInjuryLevelOption = this.getPieInjuryLevelOption();
					pieInjuryLevelOption.series[0].data = map.pieInjuryLevelList;
					// pieInjuryLevelChart.hideLoading()
					pieInjuryLevelChart.setOption(pieInjuryLevelOption);
					window.onresize = pieInjuryLevelChart.resize;

					let pieAccTypeOption = this.getPieAccTypeOption();
					pieAccTypeOption.series[0].data = map.pieAccTypeList;
					pieAccTypeChart.setOption(pieAccTypeOption);
					window.onresize = pieAccTypeChart.resize;


					let radargsOption = this.getRadargsOption(map);
					// radargsOption.series[0].data = map.radargsList;
					radargsChart.setOption(radargsOption);
					window.onresize = radargsChart.resize;

					let barLevelInjuryOption = this.getBarLevelInjuryOption();
					barLevelInjuryOption.series[0].data = map.levelInjuryMap.qings
					barLevelInjuryOption.series[1].data = map.levelInjuryMap.zhongs
					barLevelInjuryOption.series[2].data = map.levelInjuryMap.deads
					barLevelInjuryOption.xAxis[0].data = map.levelInjuryMap.years
					barLevelInjuryChart.setOption(barLevelInjuryOption);
					window.onresize = barLevelInjuryChart.resize;

					// let barTwoLevelOrgOldOption = this.getBarTwoLevelOrgOldOption(map.accInjuryMap);
					let barTwoLevelOrgOldOption = this.getOption(map.tooltipTitle,this.year)
					barTwoLevelOrgOldOption.series = map.monthList
					barTwoLevelOrgOldChart.setOption(barTwoLevelOrgOldOption);
					window.onresize = barTwoLevelOrgOldChart.resize;

					
				}).catch(e => {
					this.$Message.error("数据获取失败")
				})
			},


			getPieInjuryLevelOption() {
				let option = {
					title: {
						// text: '集团' + this.year + '年事故伤害程度人数统计',
						textStyle: {
							fontSize: 14
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}: {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						right: 15,
						top: 'center',
						data: ['轻伤人数', '重伤人数', '亡人人数']
					},
					color: ['#42A5F5', '#FFC310', '#FF3E80'],
					series: [{
						// name: '事故人数',
						type: 'pie',
						// radius: '60%',
						radius: ['40%', '60%'],
						center: ['40%', '45%'],
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							formatter: '{@2012}' // ({d}%)
						},
						data: [],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				return option;
			},
			getPieAccTypeOption() {
				let option = {
					title: {
						// text: '集团' + this.year + '年事故数量统计',
						textStyle: {
							fontSize: 14
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}: {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						right: 15,
						top: 'center',
					},
					color: ['#42A5F5', '#FF3E80', '#FFC310', '#1DE9B6', '#FD5C50', '#FF9800', '#92ffd0'],
					series: [{
						// name: '事故数量',
						type: 'pie',
						radius: ['40%', '60%'],
						center: ['40%', '45%'],
						label: {
							formatter: '{@2012}'
						},
						// roseType: 'area',
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						data: [],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				return option;
			},

			getRadargsOption(map) {
				let option = {
					title: {
						textStyle: {
							fontSize: 14
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}: {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						right: 15,
						top: 'center',
					},
					color: ['#42A5F5', '#FF3300', '#FFC310', '#75664d', '#FD5C50', '#FF9800', '#92ffd0', '#758a99',
						'#b25d25', '#8d4bbb', '#cca4e3', '#edd1d8'
					],
					series: [{
						// name: '伤残等级',
						type: 'pie',
						radius: ['40%', '60%'],
						center: ['40%', '45%'],
						label: {
							formatter: '{@2012}'
						},
						// roseType: 'area',
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						data: map.radarIndicatorList,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};

				// let option = {
				//     title: {
				//         // text: '伤残等级'
				//     },
				//     tooltip: {
				//         trigger: 'item'
				//     },
				//     // legend: {
				//     //   data: [ '伤残等级']
				//     // },
				//     radar: {
				//         // shape: 'circle',
				//         indicator: map.radarIndicator
				//             // [
				//             //     {name: 'Sales'},
				//             //     {name: 'Administration'},
				//             //     {name: 'Information Technology'},
				//             //     {name: 'Customer Support'},
				//             //     {name: 'Development'},
				//             //     {name: 'Marketing'}
				//             // ]
				//     },
				//     series: [
				//         {
				//             // name: 'Budget vs spending',
				//             type: 'radar',
				//             data: [
				//                 {
				//                     value: map.radarDataValue,
				//                     name: '伤残等级',
				//                     areaStyle: {
				//                         color: '#FFC0A0'
				//                     }
				//                 }
				//             ]
				//         }
				//     ]
				// };
				return option;
			},
			getBarLevelInjuryOption() {
				let option = {
					title: {
						// text: '集团历年事故伤害程度人数统计',
						textStyle: {
							fontSize: 14
						}
					},
					tooltip: { //提示框组件
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: { //图例组件
						right: 15,
						data: ['轻伤人数', '重伤人数', '死亡人数']
					},
					color: ['#40C4FF', '#FDD835', '#FF3E80'],
					grid: {
						left: '3%',
						right: '3%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						data: [], //动态
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '轻伤人数',
							type: 'line',
							smooth: true,
							data: [] //动态
						},
						{
							name: '重伤人数',
							type: 'line',
							smooth: true,
							data: []
						},
						{
							name: '死亡人数',
							type: 'line',
							smooth: true,
							data: []
						}
					]
				};
				return option;
			},

			getBarTwoLevelOrgOldOption(accInjuryMap) {
				let option = {
					title: [{
						// text: '二级集团历年事故伤害程度人数统计',
						textStyle: {
							fontSize: 14
						}
					}, ],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: { //图例组件
						bottom: 15,
						// data: ['轻伤人数', '重伤人数', '死亡人数']
					},
					color: ['#40C4FF', '#FDD835', '#91b4ff'],
					xAxis: [{
						type: 'value',
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							show: false
						},
					}, ],
					yAxis: [{
						type: 'category',
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						data: ['轻伤事故', '重伤事故', '亡人事故']
					}, ],
					series: [{
							name: this.year,
							type: 'bar',
							// stack: 'total',
							label: {
								show: true,
								position: 'right'
							},
							emphasis: {
								focus: 'series'
							},
							data: accInjuryMap[this.year]
						},
						{
							name: this.year - 1,
							type: 'bar',
							// stack: 'total',
							label: {
								show: true,
								position: 'right'
							},
							emphasis: {
								focus: 'series'
							},
							data: accInjuryMap[this.year - 1]
						},
						{
							name: this.year - 2,
							type: 'bar',
							// stack: 'total',
							label: {
								show: true,
								position: 'right'
							},
							emphasis: {
								focus: 'series'
							},
							data: accInjuryMap[this.year - 2]
						}
					]
				};
				return option;
			},

			getOption(tooltipTitle,year) {
				let option = {
					title: {
						// text: '集团历年事故伤害程度人数统计',
						textStyle: {
							fontSize: 14
						}
					},
					tooltip: { //提示框组件
						trigger: 'axis',
						formatter(params) {
							return tooltipTitle[params[0].name] 
						},
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: { //图例组件
						right: 15,
						// formatter(name) {
						// 	if(name.indexOf(year+'')!==-1){
						// 		return name.substring(5,9)
						// 	} 
						// },
						// data: ['轻伤人数', '重伤人数', '死亡人数']
					},
					color: ['#40C4FF', '#FDD835', '#FF3E80'],
					grid: {
						left: '3%',
						right: '3%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], //动态
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [
						{
							name: '2021年轻伤人数',
							type: 'bar',
							stack: '2021',
							emphasis: {
								focus: 'series'
							},
							data: [1,4,56,8],
							label: {
							        show: true, // 开启显示
							        position: 'top', // 在上方显示
							        distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效
							        verticalAlign: 'middle',
							        textStyle: {
							          color: '#424656', // 顶部数据的颜色
							          fontSize: 10     // 顶部数据的字体大小
							        },
							        formatter: function (params) {return '2021';}
							      }
						
						},
					
						{
							name: '2021年重伤人数',
							type: 'bar',
							stack: '2021',
							emphasis: {
								focus: 'series'
							},
							data: [34,4,56,8],						
						},
						{
							name: '2021年死亡人数',
							type: 'bar',
							stack: '死亡人数',
							emphasis: {
								focus: 'series'
							},
							data: [15,4,56,8]
						},
					]
				};
				return option;
			},

		}
	}
</script>
<style scoped>
	/deep/ .table-box .ivu-table-header th {
		position: static;
		border: 1px solid #ddd;
	}

	p {
		display: inline-block;
		font-size: 18px;
	}

	.p-title {
		display: inline-block;
		line-height: 27px;
		font-size: 18px;
		height: 27px;
		color: red;
	}

	.info {
		height: 50px;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.info-div {
		height: 50px;
		width: 14.25%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.info-div-width {
		width: 110px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.info-div:hover {
		cursor: pointer
	}

	.info-div-left {
		/*width: 45px;*/
		/*height: 45px;*/
	}

	.info-div-left-img {
		width: 40px;
		height: 40px;
	}

	.info-div-right {
		display: flex;
		flex-direction: column;
		height: 40px;
		justify-content: space-between;
		/*align-items: center;*/
		margin-left: 1px;
	}

	.info-div-right-title {
		height: 12px;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 22px;
	}

	.info-div-right-bottom {
		display: flex;
		align-items: flex-end;
	}

	.info-div-right-num {
		font-size: 20px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		line-height: 22px;
	}

	.info-div-right-danwei {
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		margin-left: 5px;
	}
</style>
